<template>
  <div class="menu-box">
    <div class="menu-l">
      <el-button
        type="primary"
        v-if="isShow(option.addBtn)"
        :size="option.size || 'small'"
        :icon="option.addBtnIcon || 'el-icon-plus'"
        @click="onEvent('row-save')"
        >{{ option.addBtnText || "添加" }}
      </el-button>
      <el-button
        type="danger"
        v-if="isShow(option.selection)"
        :size="option.size || 'small'"
        :icon="option.batchDelBtnIcon || 'el-icon-delete'"
        @click="onEvent('batch-delete')"
        >{{ option.batchDelBtnText || "批 量 删 除" }}
      </el-button>
      <!-- 自定义按钮 -->
      <slot name="menuLeft"></slot>
    </div>
    <div class="menu-r">
      <slot name="menuRight"></slot>
      <el-button
        circle
        v-if="option.exportBtn"
        :size="option.size || 'small'"
        :icon="option.exportBtnIcon || 'el-icon-download'"
        @click="dialogVisible = true"
      >
      </el-button>
      <el-button
        circle
        :size="option.size || 'small'"
        icon="el-icon-refresh-left"
        @click="onEvent('refresh-list')"
      >
      </el-button>
    </div>
    <el-dialog title="导出" :visible.sync="dialogVisible" width="600px">
      <span>
        <el-form
          ref="exportForm"
          :size="option.size || 'small'"
          :model="form"
          label-width="80px"
        >
          <el-form-item label="文件名:" placeholder="请输入 文件名">
            <el-input style="width: 450px" v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="选择数据:">
            <el-select
              style="width: 450px"
              v-model="form.type"
              placeholder="请选择导出数据"
            >
              <el-option
                label="当前数据(当前页全部数据)"
                value="allData"
              ></el-option>
              <el-option
                label="选中的数据(当前页选中的数据)"
                value="choiceData"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择字段:" placeholder="请选择字段">
            <el-cascader
              style="width: 450px"
              :show-all-levels="false"
              v-model="filterVal"
              :options="option.column"
              :props="props"
              clearable
            >
            </el-cascader>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button
          :size="option.size || 'small'"
          type="primary"
          @click="exportToExcel"
          >确定</el-button
        >
        <el-button :size="option.size || 'small'" @click="dialogVisible = false"
          >取消</el-button
        >
      </span>
    </el-dialog>
  </div>
  <!-- <div>
      <el-tag class="selectedInfo">
        <div class="selectDetails" v-if="isShow(option.selection)">
          已选择 {{ selectedRecord }} 个
        </div>
        <div
          class="empty"
          v-if="isShow(option.selection)"
          @click="onEvent('empty-event')"
        >
          清空
        </div>
        <div class="refresh">
          <slot name="menuR"></slot>
          <span
            class="el-icon-refresh-left icon"
            @click="onEvent('refresh-list')"
          ></span>
          <span
            class="el-icon-refresh-left icon"
            @click="onEvent('refresh-list')"
          ></span>
        </div>
      </el-tag>
    </div> -->
</template>

<script>
import { export2Excel } from "@/utils/tool";

export default {
  name: "ComMenuTop",
  props: {
    option: {
      type: Object,
      default: () => {},
    },
    selectedRecord: [Number, String],
    // 选择表格的数据
    choiceData: {
      type: Array,
      default: () => [],
    },
    // 全部表格数据
    allData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      props: { multiple: true, value: "prop", label: "label" },
      dialogVisible: false,
      filterVal: [],
      form: {
        title: "",
        type: "allData",
        filterVal: [],
      },
    };
  },
  computed: {
    exportData() {
      return this[this.form.type];
    },
    header() {
      return this.option.column.reduce((a, b) => {
        if (this.form.filterVal.findIndex((c) => c == b.prop) != -1) {
          a.push(b.label);
        }
        return a;
      }, []);
    },
  },
  created() {
    this.filterVal = this.option.column.map((item) => item.prop);
  },
  watch: {
    filterVal(val) {
      this.form.filterVal = val.map((item) =>
        item instanceof Array ? item[0] : item
      );
    },
  },
  methods: {
    // 是否显示
    isShow(show) {
      return show === false ? false : true;
    },
    onEvent(tmitName) {
      this.$emit(tmitName);
    },
    exportToExcel() {
      const filename = this.form.title; // 文件名
      const exportData = this.exportData; // 需要导出的报表数据
      const header = this.header; // 表头
      const headValue = this.form.filterVal; // 表头属性字段
      export2Excel(header, headValue, exportData, filename);
    },
  },
};
</script>
 
<style scoped lang = "less">
.menu-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

/deep/.el-cascader-panel {
  width: 450px;
}

/* .top-option {
  margin: 20px 0;
}

.selectedInfo {
  width: 100%;
  height: 40px;
  border-radius: 0;
  margin-bottom: 15px;
  display: flex;
  position: relative;

  .selectDetails {
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 15px;
    letter-spacing: 1px;
  }

  .empty {
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #ff0000;
    letter-spacing: 1px;
    cursor: pointer;
    margin-left: 20px;
    font-weight: bolder;
  }

  .refresh {
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    right: 10px;

    .icon {
      font-size: 25px;
      cursor: pointer;
    }
  }
} */
</style>